文字

分類

1. font開頭
2. text開頭

使用

對齊方式

1. 文字靠左對齊：text-left
2. 文字靠右對齊：text-right
3. 文字置中對齊：text-center
4. 文字左右對齊：text-justify，中文可能有些瀏覽器不支援

文字不換行

• 使用text-nowrap

文字多餘的變成刪節號

• 使用text-truncate，但文字區塊需要先設定寬度

文字粗細

1. 正常：font-weight-normal
2. 粗體：font-weight-bold

文字斜體

ex：

<h1 class="text-right">TITLE</h1>
<a href="#" class="font-weight-bold">link</a>

按鈕

寫法

1. btn：必寫，是設定按鈕結構用
2. btn-*：選擇下面的組合使用，一個按鈕可以用很多btn-*的Class

組合

分為實心按鈕、外框按鈕、按鈕狀態、大小

實心按鈕

1. primary
2. secondary
3. success
4. danger
5. warning
6. info
7. light
8. dark
9. white
10. link，有按鈕結構，但看起來像連結，和按鈕並排時很好用

外框按鈕

按鈕只有框線，hover等動作時會變實心，寫法是實心按鈕中間加outline，如btn-outline-primary、btn-outline-secondary

按鈕狀態

1. active
2. disable：建議HTML標籤用<button>，否則Tab鍵點選時可能仍可被選擇

大小

1. 加斷點，像sm、lg
2. block：會像加了display: block;一樣，寬度變100%

注意事項

1. btn可以使用在HTML標籤的<button>、<a>、<input>上，input又分為button、submit、reset三種，使用時要標準才會顯示正確。
2. 使用active時，外框按鈕會變實心。
3. 注意在寫按鈕狀態時，如果寫在<a>標籤，要寫在Class上，因為<button>和<input>有支援active和disable屬性，所以可以寫在標籤上。